<template>
  <!-- 配件替换件及库存信息 -->
  <div>
    <TopFilter :list="financeTopFilterList" :cols="3" @filterChange="changeHandle" @onCollapse="collapseHandle"></TopFilter>
    <FilterTable ref="table" height="auto" columnsRef="waxFinanceformA" :columns="columns" :params="fetchParams" :datakey="'records'" :onColumnsChange="columns => (this.selectedTableData = columns)">
      <!-- :fetchapi="fetchApi" -->
      <template slot="controls" slot-scope="props">
        <!-- <el-button size="small" type="primary" icon="el-icon-add" :disabled="searchBtn" @click="handleSearch">曾查配件号</el-button>
        <el-button size="small" type="primary" icon="el-icon-daochu" :disabled="exportBtn" @click="handleExport">导出</el-button>
        <el-button size="small" type="primary" icon="el-icon-printer" :disabled="printBtn" @click="handlePrint">打印</el-button> -->
        <!-- <el-button size="small" type="primary" icon="el-icon-plus" @click="publishInfo">新建</el-button>
        <AjaxButton :click="pushDialog" type="primary">发布</AjaxButton>
        <AjaxButton :click="offlineDialog" type="primary">下线</AjaxButton> -->
      </template>
    </FilterTable>
    <div class="btnWrap">
      <el-button @click="handleCancle">取 消</el-button>
      <el-button type="primary" @click="handleConfirm">确 定</el-button>
    </div>
  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';
import { notifyAction } from '@/utils';
export default {
  name: 'finance',
  components: {},
  mixins: [dictionary],
  props: [],
  data() {
    return {
      financeTopFilterList: this.createReplaceAndInventionTopFilterList(),
      columns: this.createTableList(),
      fetchParams: { xhrAbort: true },
      exportBtn: false,
      printBtn: false,
      searchBtn: false,
      visible: false,
      dialogTitle: '曾查配件号',
      selectedTableData: []
    };
  },
  methods: {
    handleConfirm() {
      if (this.selectedTableData && this.selectedTableData.length) {
        this.$emit('onConfirm', this.selectedTableData);
        this.handleCancle();
      } else {
        notifyAction('请选择一条数据', 'warning');
      }
    },
    handleCancle() {
      this.$emit('close');
    },
    // 关闭弹窗
    closeDialog() {
      this.visible = false;
    },
    // 点击配件进行搜索
    searchPartsHandle() {
      this.visible = true;
    },
    // 曾查配件号
    handleSearch() {
      this.visible = true;
    },
    // 打印处理
    handlePrint() {},
    // 导出处理
    handleExport() {},
    // 展开收起调用函数
    collapseHandle() {},
    // 搜索条件改变调用方法
    changeHandle() {},
    // 创建表单字段列表
    createTableList() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '筹措组',
          dataIndex: 'brand',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: 'ABC标识',
          dataIndex: 'partNo',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '体积标识',
          dataIndex: 'partName',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: []
        },
        {
          title: '价值标识',
          dataIndex: 'discription',
          sorter: true,
          filter: true,
          filterType: 'date-range'
        },
        {
          title: '重量标识',
          dataIndex: 'incomingPayment',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '保质期标识',
          dataIndex: 'costPrice',
          sorter: true,
          filter: true,
          filterType: 'number'
        }
      ];
    },
    // 创建筛选条件
    createReplaceAndInventionTopFilterList() {
      return [
        {
          type: 'INPUT',
          label: '筹措组',
          fieldName: 'partNo',
          placeholder: '',
          rules: [{ required: true, message: '请选择配件号', trigger: 'blur' }]
        }
      ];
    }
  }
};
</script>

<style scoped>
.btnWrap {
  position: absolute;
  left: 0px;
  bottom: 0px;
  right: 0px;
  z-index: 9;
  border-top: 1px solid rgb(233, 233, 233);
  padding: 10px 20px;
  background: rgb(255, 255, 255);
  text-align: right;
}
</style>
